import React, { useMemo, useEffect } from 'react'
import img from "../assets/images/timg.jpg"
import "./HomeHead.less"
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import actions from '../store/action';


const HomeHead = function HomeHead(props) {
    let { today, queryUserInfoAsync, baseInfo } = props;
    let navigate = useNavigate();

    const time = useMemo(() => {
        let day = today.substring(6);
        const area = ["0", "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
        let month = area[+today.substring(4, 6)];
        return { day, month }
    }, [today])

    useEffect(() => {
        try {
            if (!baseInfo.pic) {
                queryUserInfoAsync();
            }
        } catch (error) {

        }

    }, [])

    return (
        <header className='home-head-box'>
            <div className="info">
                <div className="time">
                    <span>{time.day}</span>
                    <span>{time.month}</span>
                </div>
                <h2 className="title">
                    知乎日报
                </h2>
            </div>

            <div className="picture">
                <img src={baseInfo?.pic ? baseInfo.pic : img} onClick={() => { navigate("/personal") }}></img>
            </div>
        </header>
    )
}

export default connect(state => ({ baseInfo: state.base }), actions.base)(HomeHead)